@media screen and (max-width: 480px) {
  .layout {
    width: 100%;
    height: 100%;
  }
  .layout .header {
    background-color: rgba(235, 205, 55, 0.8);
    display: none;
  }
  .layout .content {
    background-color: rgba(235, 205, 55, 0.8);
    display: block;
    width: 100vw;
    height: 100vh;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .layout {
    width: 100%;
    height: 100%;
  }
  .layout .header {
    background-color: blue;
    height: 12vh;
  }
  .layout .content {
    background-color: rgba(235, 56, 55, 0.4);
    height: 66vh;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .layout {
    width: 100%;
    height: 100%;
  }
  .layout .header {
    background-color: red;
    height: 9vh;
  }
  .layout .content {
    background-color: rgba(101, 110, 11, 0.6);
    height: 33vh;
    display: block;
  }
}
body {
  margin: 0;
  border: 0;
  padding: 0;
}
